<template>
	<view>
		<!-- 顶部 -->
		<view class="topBar">
			<!-- 自定义导航栏 -->
			<view>
				<uni-nav-bar @clickLeft="back" height="50px" backgroundColor="#3284fc" left-icon="left" :border="false"
					leftText="返回" rightText="设置" title="专业洗车" color="#fff" />
			</view>
			<!-- 顶部图片 -->
			<uni-card class="card1" :cover="cover">
				<image slot='cover' style="width: 100%; margin-top: 20rpx; border-radius: 30rpx;" :src="cover"></image>
				<view class="carHoomInfo">
					<view class="title1">车百事汽车生活馆</view>
					<view class="starInfo">
						<u-rate activeColor="yellow" inactiveColor="green" :count="count1" v-model="value1"></u-rate>
						<text style="margin: 0 20rpx;">5分</text>
						<text>售量:556</text>
					</view>
					<view class="carInfo">
						<view>营业时间:周一到周五</view>
						<view>早上8:00-晚上22:00</view>
						<view>位置: 山阳区人民路与解放路交叉口</view>
						<image class="img1" style="width: 40rpx; height: 40rpx;" src="@/static/myf_img/plane@2x.png">
						</image>
					</view>
				</view>
			</uni-card>


			<!-- 服务项目 -->
			<view class="carService">
				<uni-card class="card2">
					<view style="font-size: 36rpx; font-weight: 700;">服务项目</view>
					<!-- 单选按钮 -->
					<view class="radio1">
						<u-radio-group v-model="value" placement="row">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name" @change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>

					<!-- 钱 -->
					<view class="money1">
						<text style="color: orange; font-size: 30rpx; font-weight: 700;">￥35.9</text>
						<text
							style="margin-left: 20rpx; color: #bfbfbf; font-size: 26rpx; font-weight: 700; text-decoration: line-through;">￥60</text>
					</view>
					<!-- 评价 -->
					<view>
						服务态度好,工作人员很美
					</view>
				</uni-card>
			</view>


			<!-- 服务评价 -->
			<view class="carService2">
				<uni-card class="card3">
					<view style="font-size: 36rpx; font-weight: 700;">服务评价</view>
					<!-- 头像 -->
					<view class="commentItem">
						<u--image width="60px" height="60px" src="https://cdn.uviewui.com/uview/album/1.jpg"
							shape="circle"></u--image>
						<view class="commentInfo">
							<view class="title2">
								<u--text mode="name" text="张三三" format="encrypt"></u--text>
								<view style="font-size: 26rpx; color: #bfbfbf;">2022-12-31</view>
							</view>
							<u-rate activeColor="yellow" inactiveColor="green" style="margin: 20rpx auto;" :count="count2" v-model="value2"></u-rate>
							<view>
								洗的非常干净, 态度也很好,很不错,五星好评啊!!!!
							</view>
						</view>
					</view>

					<!-- 头像 -->
					<view style="margin-top: 60rpx;" class="commentItem">
						<u--image width="60px" height="60px" src="https://cdn.uviewui.com/uview/album/1.jpg"
							shape="circle"></u--image>
						<view class="commentInfo">
							<view class="title2">
								<u--text mode="name" text="张三三" format="encrypt"></u--text>
								<view style="font-size: 26rpx; color: #bfbfbf;">2022-12-31</view>
							</view>
							<u-rate activeColor="yellow" inactiveColor="green" style="margin: 20rpx auto;" :count="count3" v-model="value3"></u-rate>
							<view>
								洗的非常干净, 态度也很好,很不错,五星好评啊!!!!
							</view>
						</view>
					</view>


					<!-- 头像 -->
					<view style="margin-top: 60rpx;" class="commentItem">
						<u--image width="60px" height="60px" src="https://cdn.uviewui.com/uview/album/1.jpg"
							shape="circle"></u--image>
						<view class="commentInfo">
							<view class="title2">
								<u--text mode="name" text="张三三" format="encrypt"></u--text>
								<view style="font-size: 26rpx; color: #bfbfbf;">2022-12-31</view>
							</view>
							<u-rate activeColor="yellow" inactiveColor="green" style="margin: 20rpx auto;" :count="count4" v-model="value4"></u-rate>
							<view>
								洗的非常干净, 态度也很好,很不错,五星好评啊!!!!
							</view>
						</view>
					</view>
				</uni-card>
			</view>


			<!-- 立即下单 -->
			<view class="bottomItem">
				<view class="bottomInfo">
					<image style="width: 50rpx; height: 50rpx;" src="@/static/myf_img/客服@2x.png"></image>
					<view @click="show = true">联系客服</view>
				</view>
				<u-button style="width: 300rpx; border-radius: 50rpx; margin-left: 200rpx;" color="#bfa" type="primary"
					:hairline="true" text="立即下单"></u-button>
				<u-action-sheet @close="show = false" cancelText="取消拨号" :actions="list" :closeOnClickOverlay="true"
					:closeOnClickAction="true" :show="show"></u-action-sheet>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				list: [{
						name: '165629152662',
					},
					{
						name: '复制',
					}
				],
				show: false,
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				count1: 5,
				value1: 5,
				count2: 5,
				value2: 5,
				count3: 5,
				value3: 5,
				count4: 5,
				value4: 5,
				radiolist1: [{
						name: '普通洗车',
						disabled: false
					},
					{
						name: '精洗',
						disabled: false
					},
					{
						name: '内饰清洗',
						disabled: false
					}, {
						name: '其他清洗',
						disabled: false
					}
				],
			}
		},
		methods: {
			radioChange(n) {
				console.log('radioChange', n);
			},
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
		}
	}
</script>

<style>
	.bottomInfo {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 200rpx;
		margin-left: 30rpx;
	}

	.bottomItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 88rpx;
		background-color: #fff;
	}

	.carService2 .commentInfo {
		width: 450rpx;
	}

	.carService2 .commentItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.carService2 .commentInfo .title2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.carService2 .card3 {
		border-radius: 30rpx;
	}

	.carService .card2 {
		border-radius: 30rpx;
	}

	.carService .money1 {
		width: 100rpx;
		margin: 30rpx 10rpx;
	}

	.carService .radio1 {
		margin: 20rpx auto;
	}

	.carHoomInfo .carInfo .img1 {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.carHoomInfo .carInfo {
		position: relative;
		margin-top: 20rpx;
		width: 500rpx;
	}

	.starInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 450rpx;
		height: 30rpx;
	}

	.card1 .title1 {
		font-size: 36rpx;
		font-weight: 700;
	}

	.card1 {
		height: 800rpx;
		border-radius: 30rpx;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}
</style>